<template>
  <div>
    <!-- 在两个标签之间 直接写代码,就是传递给插槽的结构 -->
    <my-doing>
      <!-- v-slot:可以简写成 # -->
      <template #title>
      <h3>添加图书</h3>   
      </template>
      <template v-slot:content="obj">
      <form action="">
    书名: <input type="text" :value="obj.book"><br>
    作者: <input type="text" :value="obj.uname">
    </form>
      </template>
 
    <button>确认</button>
    <button>取消</button>
    </my-doing>
    <!-- <my-doing>
      <h3>删除图书</h3>
    <p>你确认要删除吗?</p>
    <button>确认</button>
    <button>取消</button>
    </my-doing> -->

  <my-list :list="users">
    <template #default='obj'>
       <button @click="del(obj.id)">删除</button>
    </template>
  
  </my-list>


  <my-list :list="goods">
    <button>查看详情</button>
    <button>修改</button>
  </my-list>
  </div>
</template>

<script>
import MyDoing from './components/MyDoing.vue'
import MyList from './components/MyList.vue'
export default {
  components: { MyDoing, MyList },
  data(){
    return {
      users: [
        { id: 2, name: '张三' },
        { id: 4, name: '李四' },
        { id: 5, name: '王五' },
        { id: 6, name: '赵六' }
      ],
    goods: [
        { id: 4, name: '方便面' },
        { id: 6, name: '火腿肠' },
        { id: 7, name: '鸡爪子' }
      ]

    }
  },
  methods:{
    del(id){
      this.users=this.users.filter(item=>{
        return item.id !==id
      })
    }
  }


}
</script>
<style>

</style>